<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="农产品生产指标" :ph="330">
          <v-chart :options="NCPSCZB" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="经济效率与发展指标" :ph="330">
          <v-chart :options="JJXLYFZZB" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农产品加工指标" :ph="330">
          <v-chart :options="NCPJGZB" />
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="农业产业化发展成熟度" :ph="330">
          <v-chart :options="NYCYHFZCSD" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="社会效益指标" :ph="330">
          <v-chart :options="SHXYZB" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="金融流量指标" :ph="330">
          <v-chart :options="JRLLZB" />
        </page-header>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import { getTowSideStatAndRadar, getTowSideStat, getTowSideStatUpDown } from '@/api/connector'
export default {
  name: 'ProductivityLevel',
  // eslint-disable-next-line vue/no-unused-components
  components: { YlCharts, PageHeader },
  data() {
    return {
      menuLevel: 1,
      // 农产品生产指标
      NCPSCZB: {},
      // 经济效率与发展指标
      JJXLYFZZB: {
        tooltip: {
          show: true,
          renderMode: 'html'
        },
        legend: {
          data: [],
          top: 'bottom',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#65F5F3', '#EAE643', '#F56565'], // 调色盘颜色列表。
        radar: [
          {
            indicator: [
              // {
              //   text: '农村水电建设本年完成投资额'
              // },
              // {
              //   text: '农村发电设备容量 '
              // },
              // {
              //   text: '农村发电量'
              // }
            ],
            center: ['50%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '经济效率与发展指标',
            type: 'radar',
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                value: [],
                // name: '长沙',
                symbol: 'rect',
                symbolSize: 5,
                areaStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 0.5)'
                  }
                },
                lineStyle: {
                  normal: {
                    type: 'solid',
                    width: 4
                  }
                }
              }
              // {
              //   value: [60, 5, 0.3],
              //   name: '平均值',
              //   lineStyle: {
              //     normal: {
              //       type: 'dashed'
              //     }
              //   }
              // },
              // {
              //   value: [100, 8, 0.4],
              //   name: '最大值',
              //   lineStyle: {
              //     normal: {
              //       type: 'dashed'
              //     }
              //   }
              // }
            ]
          }
        ]
      },
      // 农产品加工指标
      NCPJGZB: {},
      // 农业产业化发展成熟度
      NYCYHFZCSD: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          },
          // formatter: '{a} <br/>{b}: {c} %',
          formatter: function(params) {
            console.log(params)
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.seriesName + ' : ' + item.value + ' %</br>'
            })
            return result
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          data: ['2019', '2018'],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        yAxis: [
          {
            name: '%',
            position: 'left',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 交易总额',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '农户覆盖率',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      // 社会效益指标
      SHXYZB: {},
      // 金融流量指标
      JRLLZB: {
        axisPointer: {
          link: {
            xAxisIndex: 'all'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          }
        },
        legend: {},
        grid: [
          {
            left: 50,
            right: 0,
            top: 0,
            height: '35%'
          },
          {
            left: 50,
            right: 0,
            top: '42%',
            height: '35%'
          }
        ],
        xAxis: [
          {
            gridIndex: 0,
            type: 'category',
            splitNumber: 3,
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 12,
              textStyle: {
                color: '#A6A6A6',
                fontSize: 14
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            data: []
          },
          {
            gridIndex: 1,
            type: 'category',
            splitNumber: 3,
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            name: '(时间:秒)',
            nameGap: 20,
            nameTextStyle: {
              fontSize: 14,
              color: '#999'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            axisLabel: {
              textStyle: {
                color: '#A6A6A6',
                fontSize: 14
              }
            },
            splitLine: {
              show: false
            }
          },
          {
            gridIndex: 1,
            name: '(数量:十万)',
            nameGap: 20,
            nameTextStyle: {
              fontSize: 14,
              color: '#999'
            },

            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#A6A6A6',
                fontSize: 14
              }
            },
            splitLine: {
              show: false
            }
          }
        ],

        series: [
          {
            name: '当日',
            type: 'line',
            lineStyle: {
              normal: {
                width: 2,
                color: '#1990FF',
                shadowColor: 'rgba(25, 144, 255, 0.5)',
                shadowBlur: 4,
                shadowOffsetY: 2
              }
            },
            itemStyle: {
              normal: {
                color: '#1990FF',
                borderColor: '#1990FF',
                borderWidth: 10,
                opacity: 0.3
              }
            },
            data: []
          },
          {
            name: '今天',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#30DAD7',
                shadowColor: 'rgb(48, 218, 215, 0.5)',
                shadowBlur: 4,
                shadowOffsetY: 2
              }
            },
            itemStyle: {
              normal: {
                color: '#30DAD7',
                borderColor: '#30DAD7',
                borderWidth: 10,
                opacity: 0.3
              }
            },
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 农产品生产指标
      this.NCPSCZB = {
        color: ['#30E5CA', '#1BC4FC', '#7F46B3', '#10D785', '#FA9838', '#FF5B5B'],
        tooltip: {
          show: true,
          renderMode: 'html'
        },
        // legend: {
        //   show: true,
        //   top: 5,
        //   itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
        //   itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
        //   itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        //   textStyle: {
        //     fontSize: 14,
        //     color: '#ade3ff'
        //   },
        //   data: ['地区1', '地区2', '地区3', '地区4', '地区5', '地区6']
        // },
        color: ['#65F5F3', '#EAE643', '#F56565'], // 调色盘颜色列表。
        radar: [
          {
            indicator: [
              // {
              //   text: '农村水电建设本年完成投资额'
              // },
              // {
              //   text: '农村发电设备容量 '
              // },
              // {
              //   text: '农村发电量'
              // }
            ],
            center: ['50%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              textStyle: {
                color: '#fff'
              },
              // 指示器文字换行 start
              formatter: function(text) {
                var strlength = text.length
                if (strlength % 9 != 0) {
                  text = text.replace(/\S{9}/g, function(match) {
                    console.log(match)
                    return match + '\n'
                  })
                } else {
                  text = text.replace(/\S{9}/g, function(match) {
                    console.log(match)
                    return match + '\n'
                  })
                  strlength = text.length
                  text = text.substring(0, strlength - 1)
                }
                return text
              }
              // 指示器文字换行 end
            },
            splitArea: {
              areaStyle: {
                color: ['#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '农产品生产指标',
            type: 'radar',
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                value: [],
                symbol: 'rect',
                symbolSize: 5,
                areaStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 0.5)'
                  }
                }
              }
            ],
            symbol: 'rect',
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                type: 'solid',
                width: 4
              }
            }
          }
        ]
      }
      getTowSideStatAndRadar({
        groupCode: 'NCPSCZB'
      }).then((res) => {
        // this.NCPSCZB.radar[0].indicator = res.body.typeInfoSet
        for (var i = 0; i < res.body.typeInfoSet.length; i++) {
          if (res.body.typeInfoSet[i].name.indexOf('比重') != -1) {
            res.body.typeInfoSet[i].name += ' (%)'
          } else {
            res.body.typeInfoSet[i].name += ' (公斤)'
          }
        }
        this.NCPSCZB.radar[0].indicator = res.body.typeInfoSet
        this.NCPSCZB.series[0].data[0].value = res.body.dateTypeDataList[0]
      })

      // 经济效率与发展指标
      getTowSideStatAndRadar({
        groupCode: 'JJXLYFZZB'
      }).then((res) => {
        // this.JJXLYFZZB.legend.data = res.body.typeSet
        for (var i = 0; i < res.body.typeInfoSet.length; i++) {
          if (res.body.typeInfoSet[i].name.indexOf('率') != -1) {
            res.body.typeInfoSet[i].name += ' (%)'
          } else {
            res.body.typeInfoSet[i].name += ' (元)'
          }
        }
        this.NCPSCZB.radar[0].indicator = res.body.typeInfoSet
        this.JJXLYFZZB.radar[0].indicator = res.body.typeInfoSet
        this.JJXLYFZZB.series[0].data[0].value = res.body.dateTypeDataList[0]
      })

      // 农产品加工指标
      this.NCPJGZB = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            console.log(params)
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.seriesName + ' : ' + item.value + ' %</br>'
            })
            return result
          }
        },
        legend: {
          data: []
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: [
          {
            data: [],
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        yAxis: [
          {
            name: '%',
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            // stack: '总量',
            color: '#66c0f4',
            // label: {
            //     show: true
            // },
            data: []
          },
          {
            name: '',
            type: 'bar',
            // stack: '总量',
            color: '#6236FF', // df3150
            // label: {
            //     show: true,
            //     position: 'left'
            // },
            data: []
          }
        ]
      }
      getTowSideStat({
        groupCode: 'NCPJGZB'
      }).then((res) => {
        this.NCPJGZB.legend.data = res.body.typeSet
        this.NCPJGZB.xAxis[0].data = res.body.dateSet
        this.NCPJGZB.series[0].name = res.body.typeSet[0]
        this.NCPJGZB.series[0].data = res.body.typeValueListMap['农产品加工能力支持水平']
        this.NCPJGZB.series[1].name = res.body.typeSet[1]
        this.NCPJGZB.series[1].data = res.body.typeValueListMap['农产品加工综合支持率']
      })

      // 农业产业化发展成熟度
      getTowSideStat({
        groupCode: 'NYCYHFZCSD'
      }).then((res) => {
        // console.log(res.body)
        const val = res.body
        const NYCYHFZCSD = this.NYCYHFZCSD
        NYCYHFZCSD.xAxis.data = val.dateSet
        this.NYCYHFZCSD.legend.data = res.body.typeSet
        var typeValueListMap = res.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.NYCYHFZCSD.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line'
          }
        })
      })

      // 社会效益指标
      // eslint-disable-next-line no-unused-vars
      var radarDataAvg = []
      // 颜色设置
      var color = {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      }
      this.SHXYZB = {
        // title: {
        //   text: '一周跑步数据',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 32,
        //     fontWeight: 'normal'
        //   },
        //   subtext: year + '/' + weekCategory[6],
        //   subtextStyle: {
        //     color: '#fff',
        //     fontSize: 16
        //   },
        //   top: 50,
        //   left: 80
        // },
        legend: {
          top: 0,
          left: 40,
          // orient: 'vertical',
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 12,
          data: [],
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          center: ['60%', '35%'],
          radius: '35%',
          name: {
            color: '#fff'
          },
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: 0.6
            }
          },
          splitLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: 0.6
            }
          },
          splitArea: {
            areaStyle: {
              color: '#fff',
              opacity: 0.1,
              shadowBlur: 25,
              shadowColor: '#000',
              shadowOffsetX: 0,
              shadowOffsetY: 5
            }
          },
          indicator: []
        },
        grid: {
          left: 90,
          right: 80,
          bottom: 40,
          top: '65%'
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          axisLabel: {
            fontSize: 12
          },
          data: []
        },
        yAxis: {
          name: '千公顷',
          nameLocation: 'end',
          nameGap: 24,
          nameTextStyle: {
            fontSize: 14
          },
          // max: maxData,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          }
        },
        series: [
          {
            name: '社会效益指标',
            type: 'radar',
            symbolSize: 0,
            data: [
              {
                value: radarDataAvg[0],
                // name: '平均指标',
                itemStyle: {
                  normal: {
                    color: '#f8d351'
                  }
                },
                lineStyle: {
                  normal: {
                    opacity: 0
                  }
                },
                areaStyle: {
                  normal: {
                    color: '#f8d351',
                    shadowBlur: 25,
                    shadowColor: 'rgba(248,211,81,.3)',
                    shadowOffsetX: 0,
                    shadowOffsetY: -10,
                    opacity: 1
                  }
                }
              }
            ]
          },
          {
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            tooltip: {
              position: 'top',
              formatter: '{c} 千公顷',
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          },
          {
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            tooltip: {
              position: 'top',
              formatter: '{c} 千公顷',
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          },
          {
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            tooltip: {
              position: 'top',
              formatter: '{c} 千公顷',
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          },
          {
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            tooltip: {
              position: 'top',
              formatter: '{c} 千公顷',
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          }
        ]
      }
      getTowSideStat({
        groupCode: 'SHXYZB'
      }).then((res) => {
        for (var i = 0; i < res.body.typeSet.length; i++) {
          var obj = {
            name: res.body.typeSet[i] + '(%)'
          }
          this.SHXYZB.radar.indicator.push(obj)
        }
        this.SHXYZB.legend.data = res.body.typeSet
        this.SHXYZB.xAxis.data = res.body.dateSet
        this.SHXYZB.series[0].data[0].value = res.body.dateValueListMap['2019']
        this.SHXYZB.series[1].name = res.body.typeSet[0]
        this.SHXYZB.series[1].data = res.body.typeValueListMap[res.body.typeSet[0]]
        this.SHXYZB.series[2].name = res.body.typeSet[1]
        this.SHXYZB.series[2].data = res.body.typeValueListMap[res.body.typeSet[1]]
        this.SHXYZB.series[3].name = res.body.typeSet[2]
        this.SHXYZB.series[3].data = res.body.typeValueListMap[res.body.typeSet[2]]
        this.SHXYZB.series[4].name = res.body.typeSet[3]
        this.SHXYZB.series[4].data = res.body.typeValueListMap[res.body.typeSet[3]]
        // for (var i = 0; i < res.body.typeSet.length; i++) {
        //   var obj = {
        //     name: res.body.typeSet[i]
        //   }
        //   this.SHXYZB.radar.indicator.push(obj)
        // }
        // this.SHXYZB.xAxis.data = res.body.dateSet
        // // this.SHXYZB.series[0].data[0].value = res.body.dateValueListMap['2019']
        // //console.log(res.body)
        // // this.SHXYZB.radar.indicator = res.body.typeSet
        // //     this.JRLLZB.xAxis.data = res.body.dateSet
        // this.SHXYZB.legend.data = res.body.typeSet
        // var typeValueListMap = res.body.typeValueListMap
        // var color = ['#CEB711', '#3BB4FF', '#6647FF', '#19C4A1', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        // var valArrKey = []
        // var valArrval = []
        // for (var key in typeValueListMap) {
        //   valArrKey.push(key)
        //   valArrval.push(typeValueListMap[key])
        //   //console.log(typeValueListMap[key])
        // }
        // this.SHXYZB.series = valArrval.map((item, index) => {
        //   return {
        //     name: valArrKey[index],
        //     data: valArrval[index],
        //     type: 'line'
        //   }
        // })
        console.log(this.SHXYZB.series)
      })

      // 金融流量指标 JRLLZB
      var color = ['#4D8EFF', '#84BFFF', '#FE9D9A']
      this.JRLLZB = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + value + '%' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        grid: {
          // 页边距
          top: '20%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          // right:'20%',
          data: []
        },

        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          name: '比例%',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        series: [
          {
            type: 'bar',
            name: '',
            data: [],
            symbolSize: 9
          },
          {
            type: 'bar',
            name: '',
            data: [],
            symbolSize: 9,
            itemStyle: {
              normal: {
                color: color[1],
                lineStyle: {
                  width: 2,
                  type: 'solid'
                }
              }
            }
          },
          {
            type: 'bar',
            name: '',
            data: [],
            symbolSize: 9,
            itemStyle: {
              normal: {
                color: color[2],
                lineStyle: {
                  width: 2,
                  type: 'solid'
                }
              }
            }
            // areaStyle: {
            //     color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1,
            //         colorStops: [{
            //             offset: 0, color: '#fe9d9a66' // 0% 处的颜色
            //         }, {
            //             offset: 1, color: '#fe9d9a00' // 100% 处的颜色
            //         }],
            //         global: false // 缺省为 false
            //     }
            // },
            // color: color[2], //设置颜色
            // itemStyle: {
            //     normal: {
            //         lineStyle:{
            //             width:2,
            //             type:'solid'  //'dotted'虚线 'solid'实线
            //         }
            //     }
            // }
          }
        ]
      }
      getTowSideStat({
        groupCode: 'JRLLZB'
      }).then((res) => {
        this.JRLLZB.xAxis.data = res.body.dateSet
        this.JRLLZB.legend.data = res.body.typeSe
        var typeValueListMap = res.body.typeValueListMap
        var color = ['#CEB711', '#3BB4FF', '#6647FF', '#19C4A1', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.JRLLZB.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line'
          }
        })
        // this.JRLLZB.series[0].name = res.body.typeSet[0]
        // this.JRLLZB.series[0].data = res.body.typeValueListMap['一产']
        // this.JRLLZB.series[1].name = res.body.typeSet[1]
        // this.JRLLZB.series[1].data = res.body.typeValueListMap['二产']
        // this.JRLLZB.series[2].name = res.body.typeSet[2]
        // this.JRLLZB.series[2].data = res.body.typeValueListMap['三产']
      })
    }
  }
}
</script>
<style scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
